@import "../../sass/themes/base";
@import "../../sass/themes/siderMenu";

@import "../../sass/mixins/base";
@import "../../sass/mixins/compatible";

$menu-prefix: #{'.' + $css-prefix + 'sider-'};

#{$menu-prefix}menu{
  border-top: 1px solid #333;
  #{$menu-prefix}menu-item{
    border-bottom: 1px solid #333;
    cursor: pointer;
    #{$menu-prefix}menu-item-bar{
      @include clearfix();
      display: block;
      height: $sider-item-height;
      line-height: $sider-item-height;
      background-color: $sider-item-bg;
      padding-left: $sider-menu-item-pl;
      border-left: 3px solid $sider-bg;
      font-size: 16px;
      @include transition(background-color .5s);
      .icon{
        padding-right: 9px;
        font-size: 20px;
      }
      .icon-down{
        @include transform(scale(.8) rotate(0deg));
        padding-right: 21px;
        @include transition(all .8s);
        line-height: 44px;
        color: $sider-color;
      }
      &.active{
        color: lighten($sider-color, 50%);
        line-height: $sider-item-height;
        .icon{
          font-weight: 100;
          color: lighten($sider-color, 50%);
        }
        .icon-down{
          padding-right: 30px;
          @include transform-origin(30% 50%);
          @include transform(scale(.8) rotate(180deg));
          @include transition(all .8s);
          color: lighten($sider-color, 50%);
          font-weight: 100;
        }
      }
    }
    #{$menu-prefix}sub-menu{
      font-size: 14px;
      height: 0;
      overflow: hidden;
      @include transition(height .8s);
      #{$menu-prefix}sub-menu-item{
        a{
          display: block;
          padding-left: 50px;
          line-height: 38px;
          text-decoration: none;
          font-size: 14px;
        }
      }
    }
  }

  .active + #{$menu-prefix}sub-menu{
    height: auto;
    .current{
      background-color: $sider-item-active-bg;
      color: lighten($sider-color, 50%);
      a,.icon{
        color: lighten($sider-color, 50%);
      }
    }
  }
}